<template>
  <div class="voyage-num-container">
    <VoyageInfo :voyage-info="voyage"></VoyageInfo>
    <div v-if="voyageHisList.length > 0" class="voyage-pos-table">
      <el-divider content-position="left">历史航次</el-divider>
      <table cellspacing="0" cellpadding="0" border="0">
        <tbody>
          <tr>
            <td>序号</td>
            <td>始发港</td>
            <td>目的港</td>
            <td>货物</td>
            <td>开航时间</td>
            <td>结束时间</td>
          </tr>
          <template v-if="voyageHisList.length > 0">
          <tr v-for="(item, index) in voyageHisList" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.departurePort || '--' }}</td>
            <td>{{ item.destinationPort || '--' }}</td>
            <td>{{ cargoInfo(item) }}</td>
            <td>{{ item.voyageStartTime || '--' }}</td>
            <td>{{ item.voyageEndTime || '--' }}</td>
          </tr>
          </template>
          <tr v-else>
            <td colspan="6">
              <span>暂无数据</span>
            </td>
          </tr>
          <!--<tr>
            <td>1</td>
            <td>宁波</td>
            <td>舟山</td>
            <td>2022-09-30 12:11:23</td>
            <td>2022-09-30 12:11:23</td>
          </tr>
          <tr>
            <td>2</td>
            <td>上海</td>
            <td>宁波</td>
            <td>2022-09-30 12:11:23</td>
            <td>2022-09-30 12:11:23</td>
          </tr>
          <tr>
            <td>3</td>
            <td>青岛</td>
            <td>上海</td>
            <td>2022-09-30 12:11:23</td>
            <td>2022-09-30 12:11:23</td>
          </tr> -->
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
// import { getCurrentShipVoyageInfo, getShipVoyageHis } from "@/api/ship";
import VoyageInfo from "./VoyageInfo.vue"
export default {
  components: {
    VoyageInfo
  },
  props: {
    voyageInfo: {
      type: Object,
    },
  },

  computed: {
    voyage: function () {
      if (this.voyageInfo) {
        return this.voyageInfo;
      } else {
        return {};
      }
    },
    voyageHisList: function () {
      if (this.voyageInfo && this.voyageInfo.voyageHisList) {
        return this.voyageInfo.voyageHisList;
      } else {
        return [];
      }
    },
  },
  mounted() {},
  methods: {
    cargoInfo(row) {
      if (row.cargoType && row.cargoName) {
        return `${row.cargoType}-${row.cargoName}`
      } else if (row.cargoName || row.cargoType) {
        return row.cargoName || row.cargoType
      } else {
        return '--'
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.voyage-num-container {
  padding: 22px 9px;
  .goods-info {
    padding: 0 11px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 19px;
    &-item {
      margin-right: 50px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      span {
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        &:first-child {
          margin-right: 8px;
          color: #004aaa;
        }
      }
    }
  }
  .voyage-info {
    //margin-top: 19px;
    padding: 0 11px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    &-item {
      &:nth-child(2) {
        margin: 0 8px;
      }
      .address-info {
        margin-top: 16px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 12px;
        font-weight: 400;
        color: #666666;
        span {
          &:first-child {
            color: #004aaa;
          }
          &:nth-child(2) {
            margin-left: 12px;
          }
          &:nth-child(3) {
            font-size: 14px;
            font-weight: 600;
          }
        }
      }
      .time-info {
        text-align: right;
        font-size: 12px;
        font-weight: 400;
        color: #666666;
      }
      .center-arrow {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        font-size: 14px;
        font-weight: 400;
        color: #666666;
        img {
          width: 108px;
          height: 9px;
        }
      }
    }
  }

  .voyage-pos-table {
        // margin: 16px 0px;

    table {
      width: 100%;
      // border-bottom: 1px solid #d8d8d8;
      color: #666666;
      // margin-top: 9px;
      border-collapse: separate;
      border-spacing: 0 10px;

      tr {
        border-radius: 3px;
        overflow: hidden;
        box-shadow: 0px 1px 4px 0px rgba(0,74,170,0.09);
        &:first-child {
          background: #e9eeff;
          color: #666;
          box-shadow: unset;
        }
        td {
          // border-top: 1px solid #d8d8d8;
          height: 50px;
          font-size: 14px;

          font-weight: 400;
          color: #666666;
          // width: 91px;
          // height: 34px;
          text-align: center;
          padding: 4px 0;

          max-width: 100px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }

      .position {
        color: #004aaa;
      }

      .message-row {
        box-shadow: 0px 1px 4px 0px rgba(0, 74, 170, 0.09);
        margin-top: 10px;
      }
    }
  }
}
</style>
